<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>篮球NBA</title>
  <link href="favicon.ico" rel="icon" type="image/x-icon" />    <!--图标-->
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/souye.css">
</head>
<div id="sds">dsadadasd</div>
<div class="souye">
<!--顶部-->
<div class="htop">
  <div class="container">
    <div class="hleft"><h3>NBA球迷俱乐部</h3><p>NBA Fan Club</p></div>
    <div class="hid"><img src="../images/logo2.png" id="hi" ></div>
    <div class="hcenter" id="c"><img src="../images/logo2.png" id="ct"></div>
    <div class="hright">
      <form class="navbar-form navbar-left" id="ft1">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <a type="submit" class="btn glyphicon glyphicon-search" ></a>
      </form>
    </div>
  </div>
</div>
<!--导航条-->
<nav class="navbar navbar-inverse logoIcon" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <!-- sr-only 用于提升可访问性（accessibility），它的含义是 screen reader only（仅提供给屏幕阅读器使用） -->
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="active navbar-brand" href="#">首页</a>
    </div>

    <!-- 这个元素在移动设备中将被折叠起来 -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class=" hidden-sm"><a href="#">俱乐部简史</a></li>
        <li class="hidden-sm hidden-md"><a href="#">俱乐部公告</a></li>
        <li class="hidden-sm hidden-md"><a href="#">NBA赛程</a></li>
        <li class="hidden-sm"><a href="shangcheng">俱乐部商城</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right" id="login_reg_car">
      </ul>
    </div>
  </div>
</nav>
<!--轮播-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    <li data-target="#carousel-example-generic" data-slide-to="4"></li>
    <li data-target="#carousel-example-generic" data-slide-to="5"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="../images/lun1.png" alt="...">
      <div class="carousel-caption">
        NBA大赛
      </div>
    </div>
    <div class="item">
      <img src="../images/lun2.png"  alt="...">
      <div class="carousel-caption">
        2076季后赛对抗赛
      </div>
    </div>
    <div class="item">
      <img src="../images/lun3.png" alt="...">
      <div class="carousel-caption">
        科比vs乔丹
      </div>
    </div>
    <div class="item">
      <img src="../images/lun4.png" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="../images/lun5.png" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="../images/lun6.png" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<!--轮播加-->
<div class="container">
  <div class="row"  id="de">
    <div id="img11"  class="imgu img"><a ><img src="../images/lun1.png" class="img-responsive" alt="Responsive image"></a></div>
    <div id="img12"  class="imgu img"><a ><img src="../images/lun2.png" class="img-responsive" alt="Responsive image" ></a></div>
    <div id="img13"  class="imgu img"><a ><img src="../images/lun3.png" class="img-responsive" alt="Responsive image"></a></div>
    <div id="img14"  class="imgu img"><a ><img src="../images/lun4.png" class="img-responsive" alt="Responsive image" ></a></div>
    <div id="img15"  class="imgu img"><a ><img src="../images/lun5.png" class="img-responsive" alt="Responsive image" ></a></div>
    <div id="img16"  class="imgu img"><a ><img src="../images/lun6.png" class="img-responsive" alt="Responsive image" ></a></div>
  </div>


  <div class="row">
    <div class="col-sm-8" >
      <div class="panel">
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-3">
              <span class="glyphicon glyphicon-bullhorn"></span><i >官方公告</i><br>
              <a type="button" class="btn btn-danger" >了解更多...</a>
            </div>
            <div class="col-sm-9">
              <ul>
                <li><a href="">简洁、直观、强悍的前端开发框架，让web开发更迅开发更迅开发更迅开发更迅开发更迅</a></li>
                <li><a href="">简洁、直观、强悍的前端开发框架，让web开发更迅开发更迅开发更迅开发更迅开发更迅</a></li>
                <li><a href="">简洁、直观、强悍的前端开发框架，让web开发更迅开发更迅开发更迅开发更迅开发更迅</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="panel" style="margin-top: -14px">
        <div class="panel-body">
          <div class="row">
            <div id="meiti">
              <span><a href="">媒体焦点</a></span>
              <span><a href="">More+</a></span>
            </div>
            <ul id="li1">
              <li><a href=""><span>简洁、直观、强悍的前端开发框架，让web开发更迅开发更迅</span><span>2015-10-1</span></a></span></li>
              <li><a href=""><span>简洁、直观、强悍的前端开发框架，让web开发更迅开发更迅</span><span>2015-10-1</span></a></span></li>
              <li><a href=""><span>简洁、直观、强悍的前端开发框架，让web开发更迅开发更迅</span><span>2015-10-1</span></a></span></li>
              <li><a href=""><span>简洁、直观、强悍的前端开发框架，让web开发更迅开发更迅</span><span>2015-10-1</span></a></span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4" >
      <div class="panel">
        <div class="panel-body">
          <div id="sc">
            <div id="lis"><i>历史</i><i><a href="#">More</a></i></div>
            <img src="../images/图片2.png">
            <div id="li" >
              <a href=""><div >2016</div></a>
            </div>
            <div id="li2">
              <a href=""><div>2017</div></a>
            </div>
            <div id="li3">
              <a href=""><div>2018</div></a>
            </div>
          </div>
        </div>
      </div>
      <div id="box">
        <dl class="active">
          <dt>赛程</dt>
          <dd>
            <table >
              <tr>
                <th>时间</th>
                <th>场次</th>
                <th>场地</th>
                <th>胜率</th>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td colspan="4" style="text-align: center"><a href="#">...More</a></td>
              </tr>
            </table>
          </dd>
        </dl>
        <dl>
          <dt>球员</dt>
          <dd>
            <table >
              <tr>
                <th>时间</th>
                <th>场次</th>
                <th>场地</th>
                <th>胜率</th>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
            </table>
          </dd>
        </dl>
        <dl>
          <dt>球队</dt>
          <dd>
            <table >
              <tr>
                <th>时间</th>
                <th>场次</th>
                <th>场地</th>
                <th>胜率</th>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
              <tr>
                <td>2018-9-15</td>
                <td>骑士vs勇士</td>
                <td>骑士场</td>
                <td>75%</td>
              </tr>
            </table>
          </dd>
        </dl>
      </div>
    </div>
  </div>

  <footer>
    <p>©2018年著作权 NBA 中国所有权。</p>
    <p>进入NBA.com/China后，即表示阁下同意遵守NBA.com/China的隐私政策和使用条款。</p>
    <p>NBA.com/China上除去使用条款中所特别提及的部分之外，其它任何内容都不得以任何形式被复制、再传播，或篡改。</p>
  </footer>
</div>





<script src="../js/jquery-2.1.3.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/jQueryRotate.js" type="text/javascript"></script>

<script type="text/javascript">
  window.onresize = function(){
    if(document.body.scrollWidth <= 900){
      document.getElementById('ft1').style.display = 'none';
      document.getElementById('c').style.display = 'none';
      document.getElementById('hi').style.display = 'block';
    }
    if(document.body.scrollWidth > 900){
      document.getElementById('ft1').style.display = 'block';
      document.getElementById('c').style.display = 'block';
      document.getElementById('hi').style.display = 'none';
    }
  }

  $(".img").mouseover(function () {
      clearInterval(inter)
      $(".img").addClass("imgu");
      $(this).removeClass("imgu")
    }
  )

  $(".img").mouseout(function () {
      $(this).addClass("imgu")
      inter=self.setInterval("dssd()",50)
    }
  )

  var arr=$('ol li');
  console.log(arr);
  function dssd() {
    for(var i=0;i<arr.length;i++){
      if(arr[i].className=='active')
      {
        $(".img").addClass("imgu");
        $(".img").eq(i).removeClass("imgu");
      }
    }
  }
  var inter=self.setInterval("dssd()",50)

  $(document).on("click",".img",function () {
    var index = $(this).index();
    $(".item").removeClass("active")
    $(".item").eq(index).addClass("active")
  })




  var obj={
    id:'',
    oBox:function(){
      return document.getElementById(this.id)
    },
    getDl:function() {
      return this.oBox().getElementsByTagName('dl')
    },
    boxClick:function(){
      var _this=this;
      this.oBox().onclick = function (e) {
        if (!_this.isActive(e)) {
          _this.addActive(e)
        }
      }
    },
    isActive:function(ev){
      var e = ev || event;
      var target = e.target || e.srcElement;
      var obj = target.parentNode;
      if (obj.nodeName == 'DL' && obj.className == 'active')
        return true;
      else
        return false
    },
    addActive:function(ev){
      var e = ev || event;
      var target = e.target || e.srcElement;
      var obj = target.parentNode;
      if (obj.nodeName == 'DL'){
        this.clearClass();
        obj.className = 'active';
      }
    },
    clearClass:function(){
      var oDl=this.getDl();
      for (var i = 0; i < oDl.length; i++) {
        if (oDl[i].className == 'active') {
          oDl[i].className = '';
          break
        }
      }
    },
    sum:function(x,y){
      return x+y
    }
  }
  obj.id='box';
  obj.boxClick();
  console.log(obj.sum(23,90))
</script>
  <script>
    function check_login() {
      $.getJSON('/users/user_session', function (flag) {
        $('#login_reg_car').empty();
        if (flag) {
          $('#login_reg_car').append('<li class="cart_link"><a href="##">' +
            '购物车<span id="shop_num" class="badge"></span></a></li><li><a href="##">' +
            '欢迎你：' + flag.username + '</a></li><li class="logout"><a href="##" >注销</a></li>');
          // $.getJSON('/users/get_number?zh=' + flag.zh, function (num) {
          //   $('#shop_num').html(num);
          // });
        } else {
          $('#login_reg_car').append('<li class="login"><a  href="denglu">登录</a></li>' +
            '<li><a  href="zhuce">注册</a></li>')
        }
      });
    }
    check_login()
  </script>
  <script>
    $('#login_reg_car').on('click', 'li', function () {
      if (this.className == 'logout') {
        $.getJSON('/users/logout', function (flag) {
          if (flag) {
            alert("已注销");
            check_login()
          }
        })
      }
    })
  </script>
</div>
</html>
